<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站登录页面</title>
    <link rel="stylesheet" href="./font_d16igl2y6j5/iconfont.css">
    <link rel="stylesheet" href="./精灵图/iconfont.css">
    <style>
        input::-webkit-input-placeholder {
            /* WebKit browsers */
            /* color: white;  */
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .mini-head {
            width: 1349px;
            height: 56px;
            background-color: #fff;
        }

        .nav {
            width: 1349px;
            height: 36px;
            float: left;
            margin: 10px 0px 0px 10px;
        }

        .nav-1 {
            width: 505px;
            height: 36px;
            float: left;
            color: #212121;
        }

        .mini-logo {
            width: 70px;
            height: 36px;
            float: left;
            background-image: url(./img/mini-logo.jpg);
            background-size: 70px 36px;
            margin: 0px 0px 0px 30px;
            cursor: pointer;
        }

        .nav-11 {
            width: 28px;
            height: 32px;
            float: left;
            font-size: 14px;
            line-height: 32px;
            color: #333;
            margin: 0px 0px 0px 10px;
            cursor: pointer;
        }

        .nav-12 {
            width: 56px;
            height: 32px;
            float: left;
            font-size: 14px;
            line-height: 32px;
            /* color: #333; */
            padding: 0px 0px 0px 10px;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }

        .nav-12-1 {
            position: absolute;
            top: 38px;
            left: -40px;
            width: 450px;
            height: 230px;
            float: left;
            background-color: #fff;
            border-radius: 2px;
            display: none;
            box-shadow: 1px 1px 1px 1px #999;
        }

        .jiao-1 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -8px;
            margin-left: 70px;
        }

        .nav-12-2 {
            width: 270px;
            height: 230px;
            float: left;
            margin: 8px 0px 0px -78px;
            cursor: pointer;
        }

        .nav-12-21 {
            width: 240px;
            height: 100px;
            float: left;
            margin: 10px 0px 0px 15px;
            background-image: url(./img/游戏中心-命运.jpg);
            background-size: 240px 100px;
            border-radius: 5px;
            font-size: 12px;
            /* color: #333; */
            line-height: 174px;
            text-align: left;
        }

        .nav-12-22 {
            width: 240px;
            height: 110px;
            float: left;
            margin: 0px 0px 0px 15px;
            border-radius: 5px;
            font-size: 12px;
            /* color: #333; */
            line-height: 174px;
            text-align: left;
        }

        .nav-12-22-1 {
            width: 80px;
            height: 110px;
            float: left;
            margin-top: 5px;
        }

        .nav-12-22-11 {
            width: 60px;
            height: 60px;
            float: left;
            margin: 10px 0px 0px 10px;
            background-image: url(./img/游戏中心-公主连结.jpg);
            background-size: 60px 60px;
            border-radius: 5px;
        }

        .nav-12-22-12 {
            width: 60px;
            height: 40px;
            float: left;
            margin: 5px 0px 0px 10px;
            font-size: 12px;
            /* color: #333; */
            text-align: left;
            line-height: 20px;
        }

        .nav-12-22-13 {
            width: 60px;
            height: 60px;
            float: left;
            margin: 10px 0px 0px 10px;
            background-image: url(./img/游戏中心-碧蓝.jpg);
            background-size: 60px 60px;
            border-radius: 5px;
        }

        .nav-12-22-14 {
            width: 60px;
            height: 60px;
            float: left;
            margin: 10px 0px 0px 10px;
            background-image: url(./img/游戏中心-灰烬.jpg);
            background-size: 60px 60px;
            border-radius: 5px;
        }

        .nav-12-22-1:hover {
            background-color: #E7E7E7;
        }

        .nav-12-3 {
            width: 180px;
            height: 230px;
            float: left;
            margin: -230px 0px 0px 192px;
        }

        .nav-12-31 {
            width: 100px;
            height: 30px;
            margin: 5px 0px 0px 15px;
            background-image: url(./img/游戏预告.png);
            background-size: 100px 30px;
            z-index: 1;
            position: relative;
        }

        .nav-12-32 {
            width: 2px;
            height: 197px;
            float: left;
            margin: -8px 0px 0px 17px;
            background-color: rgb(206, 203, 203);
            box-shadow: 1px rgba(206, 203, 203, 203);
            z-index: 0;
        }

        .nav-12-33 {
            width: 140px;
            height: 195px;
            float: left;
            margin: -190px 0px 0px 32px;
            font-size: 12px;
            /* color: #333; */
        }

        .nav-12-331 {
            position: relative;
            width: 140PX;
            height: 27PX;
            float: left;
            text-align: left;
            line-height: 27px;
            cursor: pointer;
        }

        .nav-12-33-1 {
            position: absolute;
            width: 213PX;
            height: 220PX;
            /* float: left; */
            background-image: url(./img/天地劫.png);
            background-size: 213px 220px;
            margin: -50px 0px 0px 149px;
            display: none;
        }

        .nav-12-33-2 {
            position: absolute;
            width: 213PX;
            height: 210PX;
            float: left;
            background-image: url(./img/英雄联盟手游.png);
            background-size: 213px 220px;
            margin: -68px 0px 0px 149px;
            display: none;
        }

        .nav-12-33-3 {
            position: absolute;
            width: 213PX;
            height: 220PX;
            float: left;
            background-image: url(./img/暗黑-不朽.png);
            background-size: 213px 220px;
            margin: -104px 0px 0px 149px;
            display: none;
        }

        .nav-12-33-4 {
            position: absolute;
            width: 213PX;
            height: 220PX;
            float: left;
            background-image: url(./img/Apex英雄.png);
            background-size: 213px 220px;
            margin: -131px 0px 0px 149px;
            display: none;
        }

        .nav-12-33-5 {
            position: absolute;
            width: 213PX;
            height: 220PX;
            float: left;
            background-image: url(./img/地下城.png);
            background-size: 213px 220px;
            margin: -159px 0px 0px 149px;
            display: none;
        }

        .nav-12-33-6 {
            position: absolute;
            width: 213PX;
            height: 220PX;
            float: left;
            background-image: url(./img/黎明觉醒.png);
            background-size: 213px 220px;
            margin: -185px 0px 0px 149px;
            display: none;
        }

        .nav-12-33-7 {
            position: absolute;
            width: 213PX;
            height: 220PX;
            float: left;
            background-image: url(./img/哈利-魔法觉醒.jpg);
            background-size: 213px 220px;
            margin: -212px 0px 0px 149px;
            display: none;
        }

        .nav-12-331:hover {
            background-color: #E7E7E7;
        }

        .nav-12-331:hover .nav-12-33-1,
        .nav-12-331:hover .nav-12-33-2,
        .nav-12-331:hover .nav-12-33-3,
        .nav-12-331:hover .nav-12-33-4,
        .nav-12-331:hover .nav-12-33-5,
        .nav-12-331:hover .nav-12-33-6,
        .nav-12-331:hover .nav-12-33-7 {
            display: block;
        }

        .nav-12:hover .nav-12-1 {
            display: block;
        }

        .nav-111 {
            width: 28px;
            height: 32px;
            float: left;
            font-size: 14px;
            line-height: 32px;
            color: #212121;
            padding: 0px 0px 0px 10px;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }

        .nav-111-1 {
            position: absolute;
            top: 38px;
            left: -40px;
            width: 500px;
            height: 230px;
            float: left;
            background-color: #fff;
            border-radius: 2px;
            display: none;
            box-shadow: 1px 1px 1px 1px #999;
        }

        .nav-111:hover .nav-111-1 {
            display: block;
        }

        .jiao-2 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -8px;
            margin-left: 57px;
        }

        .nav-111-11 {
            width: 270px;
            height: 230px;
            float: left;
            cursor: pointer;
        }

        .nav-111-111 {
            width: 200px;
            height: 30px;
            display: inline-block;
            font-size: 14px;
            font-weight: 600;
            color: #fb7299;
            margin: 6px 0px 0px 15px;
        }

        .nav1 {
            width: 250px;
            height: 190px;
            float: left;
            margin: 0px 0px 0px 15px;
        }

        .nav11 {
            width: 80px;
            height: 90px;
            float: left;
            padding: 0px 0px 0px 3px;
        }

        .bo-1 {
            width: 60px;
            height: 60px;
            float: left;
            margin: auto;
            background-image: url(./img/直播-1.jpg);
            background-size: 60px 60px;
            border-radius: 100%;
            margin: 10px 0px 0px 10px;
            position: relative;
        }

        .dian {
            position: absolute;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            border-radius: 100%;
            display: none;
        }

        .dian1 {
            width: 13px;
            height: 13px;
            background-color: #fb7299;
            border-radius: 13px;
            margin: 25px 0px 0px 5px;
            float: left;
        }

        .dian2 {
            width: 35px;
            height: 50px;
            margin: 15px 0px 0px 5px;
            font-size: 14px;
            color: #666;
            float: left;
        }

        .bo-1:hover .dian {
            display: block;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .bo-11 {
            width: 80px;
            height: 20px;
            float: left;
            font-size: 12px;
            color: #333;
            text-align: center;
            line-height: 20px;
        }

        .bo-2 {
            width: 60px;
            height: 60px;
            float: left;
            margin: auto;
            background-image: url(./img/直播-2.jpg);
            background-size: 60px 60px;
            border-radius: 100%;
            margin: 10px 0px 0px 10px;
            position: relative;
        }

        .bo-2:hover .dian,
        .bo-3:hover .dian,
        .bo-4:hover .dian,
        .bo-5:hover .dian,
        .bo-6:hover .dian {
            display: block;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .bo-3 {
            width: 60px;
            height: 60px;
            float: left;
            margin: auto;
            background-image: url(./img/直播-3.jpg);
            background-size: 60px 60px;
            border-radius: 100%;
            margin: 10px 0px 0px 10px;
            position: relative;
        }

        .bo-4 {
            width: 60px;
            height: 60px;
            float: left;
            margin: auto;
            background-image: url(./img/直播-4.jpg);
            background-size: 60px 60px;
            border-radius: 100%;
            margin: 10px 0px 0px 10px;
            position: relative;
        }

        .bo-5 {
            width: 60px;
            height: 60px;
            float: left;
            margin: auto;
            background-image: url(./img/直播-5.jpg);
            background-size: 60px 60px;
            border-radius: 100%;
            margin: 10px 0px 0px 10px;
            position: relative;
        }

        .bo-6 {
            width: 60px;
            height: 60px;
            float: left;
            margin: auto;
            background-image: url(./img/直播-小阿KK.jpg);
            background-size: 60px 60px;
            border-radius: 100%;
            margin: 10px 0px 0px 10px;
            position: relative;
        }

        .nav-111-12 {
            width: 1px;
            height: 180px;
            float: left;
            margin: 35px 0px 0px 5px;
            background-color: rgb(196, 182, 181);
        }

        .nav-111-13 {
            width: 210px;
            height: 230px;
            float: right;
            margin: 0px 0px 0px 10px;
        }

        .bo-8 {
            width: 130px;
            height: 30px;
            display: inline-block;
            font-size: 14px;
            font-weight: 600;
            color: #fb7299;
            margin: 6px 0px 0px 15px;
        }

        .bo-9 {
            width: 190px;
            height: 100px;
            float: left;
            background-image: url(./img/热门活动.jpg);
            background-size: 190px 100px;
        }

        .nav-13 {
            width: 42px;
            height: 32px;
            float: left;
            font-size: 14px;
            line-height: 32px;
            color: #212121;
            margin: 0px 0px 0px 10px;
            cursor: pointer;
        }

        .nav-112 {
            width: 28px;
            height: 32px;
            float: left;
            font-size: 14px;
            line-height: 32px;
            color: #212121;
            padding: 0px 0px 0px 10px;
            cursor: pointer;
            position: relative;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .nav-112-1 {
            position: absolute;
            top: 38px;
            left: -40px;
            width: 480px;
            height: 230px;
            float: left;
            background-color: #fff;
            border-radius: 2px;
            display: none;
            box-shadow: 1px 1px 1px 1px #999;
        }

        .nav-112:hover .nav-112-1 {
            display: block;
        }

        .jiao-3 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -8px;
            margin-left: 57px;
        }

        .nav-112-2 {
            width: 320px;
            height: 230px;
            float: left;
            cursor: pointer;

        }

        .nav-112-2-1 {
            width: 150px;
            height: 100px;
            float: left;
            margin: 10px 0px 0px 10px;
        }

        .nav-112-21 {
            width: 150px;
            height: 80px;
            float: left;
            background-image: url(./img/漫画-1.jpg);
            background-size: 150px 80px;
        }

        .nav-112-22 {
            width: 100px;
            height: 20px;
            display: inline-block;
            font-size: 12px;
            color: #333;
            text-align: left;
            line-height: 20px;
        }

        .nav-112-23 {
            width: 150px;
            height: 80px;
            float: left;
            background-image: url(./img/漫画-刀剑神域.jpg);
            background-size: 150px 80px;
        }

        .nav-112-24 {
            width: 150px;
            height: 80px;
            float: left;
            background-image: url(./img/漫画-天赐官福.jpg);
            background-size: 150px 80px;
        }

        .nav-112-25 {
            width: 150px;
            height: 80px;
            float: left;
            background-image: url(./img/漫画-仙王.jpg);
            background-size: 150px 80px;
        }

        .nav-112-3 {
            width: 1px;
            height: 210px;
            float: left;
            margin: 10px 0px 0px 10px;
            background-color: rgb(196, 182, 181);
        }

        .nav-112-4 {
            width: 160px;
            height: 230px;
            float: right;
            margin: 0px 0px 0px 10px;
        }

        .nav-112-5 {
            width: 100px;
            height: 30px;
            float: left;
            font-size: 14px;
            font-weight: 600;
            color: #fb7299;
            margin: -220px 0px 0px 20px;
        }

        .aa {
            /* list-style: decimal !important; */
            width: 145px;
            height: 30px;
            float: left;
            margin: -195px 0px 0px 17px;
            position: relative;
            cursor: pointer;
        }

        .aa:hover,
        .ab:hover,
        .ac:hover,
        .ad:hover,
        .ae:hover,
        .af:hover {
            background-color: #E7E7E7;
        }

        .aa-1 {
            width: 10px;
            height: 30px;
            display: inline-block;
            font-size: 12px;
            color: #ebcfac;
            margin-left: 5px;
        }

        .aa-2 {
            width: 120px;
            height: 30px;
            display: inline-block;
            font-size: 12px;
            color: #333;
            margin-left: 5px;

        }

        .aa-21 {
            position: absolute;
            width: 150px;
            height: 200px;
            float: left;
            background-image: url(./img/漫画-6-咒术.jpg);
            background-size: 150px 200px;
            margin: -47px 0px 0px 115px;
            border-radius: 5px;
            display: none;
        }

        .aa:hover .aa-21 {
            display: block;
        }

        .ab {
            /* list-style: decimal !important; */
            width: 145px;
            height: 30px;
            float: left;
            margin: -166px 0px 0px 17px;
            position: relative;
            cursor: pointer;
        }

        .aa-22 {
            position: absolute;
            width: 150px;
            height: 200px;
            float: left;
            background-image: url(./img/漫画-5-天赐官福.jpg);
            background-size: 150px 200px;
            margin: -72px 0px 0px 115px;
            border-radius: 5px;
            display: none;
        }

        .ab:hover .aa-22 {
            display: block;
        }

        .ac {
            /* list-style: decimal !important; */
            width: 145px;
            height: 30px;
            float: left;
            margin: -136px 0px 0px 17px;
            position: relative;
            cursor: pointer;
        }

        .aa-23 {
            position: absolute;
            width: 150px;
            height: 200px;
            float: left;
            background-image: url(./img/妹子太多.jpg@320w);
            background-size: 150px 200px;
            margin: -96px 0px 0px 115px;
            border-radius: 5px;
            display: none;
        }

        .ac:hover .aa-23 {
            display: block;
        }

        .ad {
            /* list-style: decimal !important; */
            width: 145px;
            height: 30px;
            float: left;
            margin: -106px 0px 0px 17px;
            position: relative;
            cursor: pointer;
        }

        .aa-24 {
            position: absolute;
            width: 150px;
            height: 200px;
            float: left;
            background-image: url(./img/漫画-4.jpg);
            background-size: 150px 200px;
            margin: -126px 0px 0px 115px;
            border-radius: 5px;
            display: none;
        }

        .ad:hover .aa-24 {
            display: block;
        }

        .ae {
            /* list-style: decimal !important; */
            width: 145px;
            height: 30px;
            float: left;
            margin: -76px 0px 0px 17px;
            position: relative;
            cursor: pointer;
        }

        .aa-25 {
            position: absolute;
            width: 150px;
            height: 200px;
            float: left;
            background-image: url(./img/碧蓝.jpg@320w);
            background-size: 150px 200px;
            margin: -156px 0px 0px 115px;
            border-radius: 5px;
            display: none;
        }

        .ae:hover .aa-25 {
            display: block;
        }

        .af {
            /* list-style: decimal !important; */
            width: 145px;
            height: 30px;
            float: left;
            margin: -46px 0px 0px 17px;
            position: relative;
            cursor: pointer;
        }

        .aa-26 {
            position: absolute;
            width: 150px;
            height: 200px;
            float: left;
            background-image: url(./img/反派.jpg@320w);
            background-size: 150px 200px;
            margin: -186px 0px 0px 115px;
            border-radius: 5px;
            display: none;
        }

        .af:hover .aa-26 {
            display: block;
        }

        .nav-14 {
            width: 91px;
            height: 32px;
            float: left;
        }

        .icon2 {
            width: 18px;
            height: 18px;
            float: left;
            font-size: 18px;
            margin: 6px -8px 0px 10px;
            color: #00a1b6;
            cursor: pointer;
        }

        .nav-15 {
            width: 56px;
            height: 32px;
            float: left;
            font-size: 14px;
            line-height: 32px;
            color: #212121;
            padding: 0px 0px 0px 10px;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }

        .nav-15-1 {
            position: absolute;
            top: 38px;
            left: -90px;
            width: 250px;
            height: 200px;
            float: left;
            background-image: url(./img/app-download.png);
            background-size: 250px 200px;
            display: none;
        }

        .jiao-4 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -5px;
            margin-left: 120px;
        }

        .nav-15-2 {
            width: 130px;
            height: 30px;
            display: inline-block;
            font-size: 14px;
            color: #666;
            line-height: 30px;
            text-align: center;
            margin: 160px 0px 0px 65px;
        }

        .nav-15:hover .nav-15-1 {
            display: block;
        }

        .nav-2 {
            width: 283px;
            height: 36px;
            float: left;
            background-color: #F4F4F4;
            margin-left: 20px;
            position: relative;
        }

        .nav-21>input {
            position: absolute;
            width: 226px;
            height: 30px;
            float: left;
            margin: 3px 0px 0px 20px;
            color: #999;
            font-size: 14px;
            line-height: 30px;
            overflow: hidden;
            border: none;
            background-color: transparent;
        }

        .nav-21>input:focus {
            outline: none;
        }

        .nav-22 {
            width: 50px;
            height: 36px;
            float: right;
            background-color: #E7E7E7;
        }

        .icon3 {
            position: absolute;
            width: 18px;
            height: 18px;
            float: left;
            font-size: 18px;
            font-weight: 700;
            margin: 7px -8px 0px 15px;
            color: #505050;
            cursor: pointer;
        }

        .icon3:hover {
            color: #00a1d6;
        }

        .nav-3 {
            width: 36px;
            height: 36px;
            float: left;
            font-size: 14px;
            color: #00a1d6;
            line-height: 36px;
            text-align: center;
            font-weight: 600;
            background-color: #f6f6f6;
            margin-left: 20px;
            border-radius: 50%;
            position: relative;
            cursor: pointer;
        }

        .nav-31 {
            /* opacity: 0; */
            position: absolute;
            top: 43px;
            left: -160px;
            width: 360px;
            height: 210px;
            background-color: #fff;
            box-shadow: 1px 1px 1px 1px #999;
            display: none;
        }

        .san-1 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -8px;
            margin-left: 170px;
        }

        .nav-31-1 {
            position: absolute;
            top: 3px;
            left: 10px;
            width: 100px;
            height: 30px;
            display: inline-block;
            font-size: 14px;
            color: #666;
        }

        .nav-31-2 {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 150px;
            height: 30px;
            float: left;
        }

        .icon4 {
            width: 18px;
            height: 18px;
            float: left;
            font-size: 20px;
            font-weight: 700;
            color: #00a1d6;
            margin: -2px -8px 0px 0px;
        }

        .nav-31-21 {
            width: 130px;
            height: 30px;
            float: left;
            font-size: 14px;
            font-weight: 700;
            color: #505050;
            margin: -2px 0px 0px 5px;
        }

        .nav-31-3 {
            position: absolute;
            top: 80px;
            left: 10px;
            width: 150px;
            height: 30px;
            float: left;
        }

        .nav-31-4 {
            position: absolute;
            top: 40px;
            left: 190px;
            width: 150px;
            height: 30px;
            float: left;
        }

        .nav-31-5 {
            position: absolute;
            top: 80px;
            left: 190px;
            width: 160px;
            height: 30px;
            float: left;
        }

        .nav-31-22 {
            width: 130px;
            height: 30px;
            float: left;
            font-size: 14px;
            font-weight: 700;
            color: #505050;
            margin: -2px 0px 0px 14px;
        }

        .nav-31-6 {
            position: absolute;
            top: 120px;
            left: 15px;
            width: 330px;
            height: 40px;
            float: left;
            background-color: #00a1d6;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .nav-31-6:hover {
            background-color: #78b1c4;
            transition: all 0.5s;
        }

        .nav-31-7 {
            width: 120px;
            height: 25px;
            float: left;
            font-size: 14px;
            line-height: 25px;
            margin: 170px 0px 0px 123px;
        }

        .nav-31-8 {
            width: 63px;
            height: 25px;
            float: left;
            color: #505050;
        }

        .nav-31-9>a {
            width: 57px;
            height: 25px;
            float: left;
            color: #00a1d6;
            cursor: pointer;
        }

        .nav-3:hover .nav-31 {
            display: block;
            /* opacity: 1; */
            /* transition: all 1s; */
        }

        .nav-4 {
            width: 300px;
            height: 36px;
            float: left;
            color: #212121;
            margin: 0px 0px 0px 20px;
        }

        .nav-41 {
            width: 42px;
            height: 16px;
            float: left;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
            cursor: pointer;
            position: relative;
            padding: 10px 0px;
        }

        .nav-41-1 {
            position: absolute;
            top: 36px;
            left: -100px;
            width: 250px;
            height: 225px;
            float: left;
            background-color: #fff;
            box-shadow: 1px 1px 1px 1px #999;
            border-radius: 2px;
            display: none;
        }

        .san-2 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -8px;
            margin-left: 113px;
        }

        .nav-41-2 {
            width: 100px;
            height: 20px;
            float: left;
            font-size: 14px;
            color: #333;
            line-height: 20px;
            margin: 20px 0px 0px -10px;
        }

        .nav-41-3 {
            width: 230px;
            height: 68px;
            float: left;
            background-image: url(./img/1.jpg);
            background-size: 230px 68px;
            margin: 10px 0px 0px 10px;
        }

        .nav-41-4 {
            width: 250px;
            height: 40px;
            float: left;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            margin: 10px 0px 0px 10px;
        }

        .nav-41-4:hover {
            color: #00a1d6;
        }

        .nav-41-5 {
            width: 200px;
            height: 30px;
            float: left;
            margin: 15px 0px 0px 25px;
            font-size: 14px;
            color: #fff;
            line-height: 30px;
            text-align: center;
            background-color: #00a1d6;
            border-radius: 5px;
            cursor: pointer;
        }

        .nav-41-5:hover {
            background-color: #78b1c4;
        }

        .nav-41:hover .nav-41-1 {
            display: block;
        }

        .nav-42 {
            width: 28px;
            height: 16px;
            float: left;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
            margin: 0px 0px 0px 10px;
            cursor: pointer;
            position: relative;
            padding: 10px 0px;
        }

        .nav-42-1 {
            position: absolute;
            top: 36px;
            left: -136px;
            width: 300px;
            height: 100px;
            float: left;
            background-color: #fff;
            border-radius: 2px;
            display: none;
            box-shadow: 1px 1px 1px 1px #999;
        }

        .san-3 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -8px;
            margin-left: 145px;
        }

        .nav-42-2 {
            width: 180px;
            height: 30px;
            display: inline-block;
            font-size: 14px;
            color: #999;
            text-align: center;
            line-height: 30px;
            margin: 15px 0px 0px 15px;
        }

        .nav-42-3 {
            width: 200px;
            height: 30px;
            float: left;
            font-size: 14px;
            color: #333;
            text-align: center;
            line-height: 30px;
            margin: 15px 0px 0px 58px;
            background-color: #00a1d6;
        }

        .nav-42-3:hover {
            background-color: #78b1c4;
        }

        .nav-42:hover .nav-42-1 {
            display: block;
        }

        .nav-43 {
            width: 56px;
            height: 16px;
            float: left;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
            margin: 0px 0px 0px 10px;
            cursor: pointer;
            position: relative;
            padding: 10px 0px;
        }

        .nav-43-1 {
            position: absolute;
            top: 36px;
            left: -136px;
            width: 300px;
            height: 100px;
            float: left;
            background-color: #fff;
            border-radius: 2px;
            display: none;
            box-shadow: 1px 1px 1px 1px #999;
        }

        .nav-43:hover .nav-43-1 {
            display: block;
        }

        .nav-5 {
            width: 100px;
            height: 36px;
            float: left;
            background-color: #fb7299;
            margin: 0px 0px 0px 20px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 36px;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
        }

        .nav-51 {
            position: absolute;
            top: 42px;
            right: -15px;
            width: 380px;
            height: 78px;
            float: left;
            background-color: #fff;
            border-radius: 2px;
            display: none;
            box-shadow: 1px 1px 1px 1px #999;
        }

        .san-4 {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin-top: -8px;
            margin-left: 305px;
        }

        .nav-52 {
            width: 76px;
            height: 78px;
            float: left;
        }

        .nav-52-1 {
            width: 50px;
            height: 36px;
            float: left;
            margin: 10px 0px 0px 13px;
        }

        .nav-52-2 {
            width: 76px;
            height: 20px;
            float: left;
            font-size: 14px;
            color: #999;
            text-align: center;
            line-height: 20px;
            font-weight: 600;
        }

        .nav-52:hover {
            background-color: #E7E7E7;
        }

        .nav-5:hover .nav-51 {
            display: block;
        }

        .footer {
            width: 100%;
            height: 408px;
            margin-top: 510px;
            background-color: #f6f9fa;
        }

        .bx1 {
            width: 1350px;
            margin: auto;
        }

        .footer-top {
            width: 100%;
            height: 150PX;
            float: left;
            margin-top: 30px;
        }

        .footer-top-left {
            width: 410px;
            height: 150PX;
            float: left;
            border-right: 1px solid #EEEEEE;
        }

        .footer-top-middle {
            width: 590px;
            height: 150PX;
            float: left;
            border-right: 1px solid #EEEEEE;
            margin-left: 30px;
        }

        .footer-top-right {
            width: 270px;
            height: 150PX;
            float: left;
            margin-left: 40px;
        }

        .footer-top-left>span {
            font-size: 16px;
            color: #999999;
            margin: 0px 0px 20px;
            display: block;
        }

        .left-1>li {
            font-size: 14px;
            color: #999999;
            float: left;
            margin: 0px 110px 10px 0px;
            color: #212121;
            transition: color 0.3s;
            cursor: pointer;
        }

        .left-1>li:hover {
            color: #00a1d6;
        }

        .middle-1,
        .middle-2,
        .middle-3 {
            width: 95px;
            height: 120px;
            float: left;
            margin-right: 90px;
        }

        .footer-top-middle>span {
            font-size: 16px;
            color: #999999;
            margin: 0px 0px 20px;
            display: block;
        }

        .footer-top-middle>ul>li {
            font-size: 14px;
            color: #999999;
            float: left;
            margin: 0px 0px 10px 0px;
            color: #212121;
            transition: color 0.3s;
            cursor: pointer;
        }

        .footer-top-middle>ul>li:hover {
            color: #00a1d6;
        }

        .right-1,
        .right-2,
        .right-3 {
            width: 80px;
            height: 80px;
            display: inline-block;
            margin-top: 40px;
        }

        .right-1-1 {
            width: 50px;
            height: 50px;
            background-color: #999999;
            border-radius: 100%;
            line-height: 50px;
            text-align: center;
        }

        .right-1-2 {
            width: 50px;
            height: 50px;
            background-color: pink;
            border-radius: 100%;
            line-height: 50px;
            text-align: center;
        }

        .right-1-3 {
            width: 50px;
            height: 50px;
            background-color: greenyellow;
            border-radius: 100%;
            line-height: 50px;
            text-align: center;
        }

        .icon1 {
            font-size: 30px;
            color: #f5f5f5;
        }

        .right-1>p {
            font-size: 14px;
            margin-top: 10px;
            color: #212121;
            height: 20px;
            transition: color 0.2s;
            cursor: pointer;
        }

        .right-1>p:hover {
            color: #00a1d6;
        }

        .foot-bottom {
            width: 1347px;
            height: 160px;
            float: left;
            margin: 30px 0px 0px 0px;
        }

        .bottom-left {
            width: 98px;
            float: left;
        }

        .bottom-right {
            width: 1229px;
            float: left;
            margin: 5px 0px 0px 20px;
        }

        .bottom-1 {
            width: 1229px;
            height: 20px;
            float: left;
        }

        .bott-1>li {
            font-size: 12px;
            color: #999999;
            float: left;
            padding: 5px 15px 0px 0px;
        }

        .ye {
            cursor: pointer;
        }

        .ye:hover {
            color: #00a1d6;
        }

        .top {
            background: #00a0d8;
            height: 86px;
            text-align: center;
            margin-bottom: 20px;
        }

        .banxin {
            width: 980px;
            margin: auto;
        }

        .title-line {
            width: 980px;
            height: 28px;
            margin: auto;
            border-bottom: 1px solid #ddd;
            margin-bottom: 28px;
            text-align: center;
        }

        .title-line>.tit {
            height: 56px;
            line-height: 56px;
            margin: auto;
            padding: 0 20px;
            font-size: 40px;
            background: #fff;
            text-align: center;
        }

        .login-left {
            width: 476px;
            height: 367px;
            float: left;
        }

        .login-left-up {
            width: 476px;
            height: 192px;
            float: left;
        }

        .login-left-up-status {
            width: 140px;
            height: 140px;
            margin: auto;
            background-image: url(./img/login-left-up.png);
            background-size: 140px 140px;
            cursor: pointer;
            position: relative;
            bottom: -52px;
            left: 0;
        }

        .status-up {
            position: absolute;
            top: -63px;
            left: -13px;
            width: 70px;
            height: 70px;
            background-image: url(./img/status-up.png);
            background-repeat: no-repeat;
        }

        .login-left-up-two {
            width: 476px;
            height: 192px;
            background-image: url(./img/login-left-up-two.png);
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
            position: absolute;
            top: -50px;
            left: 50%;
            margin-left: -240px;
            background-color: #fff;
            display: none;
        }

        .login-left-up-status:hover .login-left-up-two {
            display: block;
            transition: opacity .5s;
        }

        .login-left-down {
            width: 476px;
            height: 155px;
            float: left;
            background-image: url(./img/login-left-down.png);
            background-repeat: no-repeat;
        }

        .status-txt {
            padding-top: 20px;
            text-align: center;
            color: #222;
            font-size: 18px;
            letter-spacing: 3px;
            margin-bottom: 5px;
        }

        .app-link {
            text-align: center;
            color: #717171;
            font-size: 14px;
        }

        .login-line {
            float: left;
            border-right: 1px solid #ddd;
            height: 300px;
            margin-top: 28px;
            margin: 0px 9px;
        }

        .login-right {
            width: 485px;
            height: 367px;
            float: left;
        }

        .input-box {
            width: 414px;
            height: 288px;
            float: left;
            margin: 50px 0px 0px 0px;
            padding-left: 45px;
        }

        .type-tab {
            width: 414px;
            height: 19px;
            float: left;
            margin: 0px 0px 12px;
            cursor: pointer;
        }

        .active {
            width: 56px;
            height: 19px;
            float: left;
            color: #02a7de;
            font-size: 14px;
            margin: 0px 20px 0px 0px;
        }

        .active-mess {
            width: 56px;
            height: 19px;
            float: left;
            color: #000;
            font-size: 14px;
            margin: 0px 20px 0px 0px;
        }

        .login-username {
            width: 394px;
            height: 20px;
            float: left;
            color: #aaa;
            font-size: 14px;
            padding: 10px 9px;
            border-radius: 4px;
            border: 1px solid #ddd;
            outline: none;
        }

        .login-password {
            width: 394px;
            height: 20px;
            float: left;
            color: #aaa;
            font-size: 14px;
            padding: 10px 9px;
            border-radius: 4px;
            border: 1px solid #ddd;
            outline: none;
            margin-top: 20px;
        }

        .remember {
            height: 16px;
            width: 410px;
            float: left;
            font-size: 12px;
            line-height: 16px;
            margin: 30px 0px 10px 0px;
            color: #717171;
            cursor: pointer;
        }

        .checkbox {
            width: 14px;
            height: 14px;
            color: #aaa;
            float: left;
            outline: none
        }

        .remember-i {
            width: 36px;
            height: 14px;
            float: left;
            margin: 0px 5px;
        }

        .remember-no {
            width: 175px;
            height: 14px;
            float: left;
            color: #bbb;
        }

        .question {
            width: 120px;
            height: 16px;
            float: right;
            font-size: 12px;
            color: #00a1d6;
        }
        .question a{
            color: #00a1d6;
        }

        .forget-password {
            width: 54px;
            height: 16px;
            float: left;
            padding-right: 10px;
        }

        .btn-box {
            width: 414px;
            height: 38px;
            float: left;
            font-size: 14px;
            background-color: #fff;
        }

        .btn-login {
            width: 186px;
            height: 38px;
            float: left;
            line-height: 38px;
            text-align: center;
            color: #fff;
            background-color: #0381aa;
            border: 1px solid #0381aa;
            border-radius: 2px;
            cursor: pointer;
        }

        .btn-login:hover {
            background-color: #00a7de;
            transition: all 0.3s;
        }

        .btn-reg {
            width: 184px;
            height: 38px;
            float: right;
            color: #555;
            border: 1px solid #ccc;
            border-radius: 2px;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
        }

        .btn-reg:hover {
            background-color: #e8edee;
            transition: all 0.3s;
        }

        .sns {
            width: 414px;
            height: 21px;
            float: left;
            font-size: 12px;
            color: #717171;
            padding: 12px 0;
            cursor: pointer;
        }

        .btn-weibo {
            width: 21px;
            height: 21px;
            float: left;
            background-image: url(./img/sns.png);
            vertical-align: middle;
            margin-right: 5px;
        }

        .btn-weibo {
            width: 21px;
            height: 21px;
            float: left;
            background-image: url(./img/sns.png);
            vertical-align: middle;
            margin-right: 5px;
        }

        .btn-qq {
            width: 21px;
            height: 21px;
            float: left;
            background-image: url(./img/sns.png);
            background-position: 0 -41px;
            vertical-align: middle;
            /* 垂直居中 */
            margin-right: 5px;
            margin-left: 20px;
        }

        .btn-deng {
            width: 75px;
            height: 21px;
            float: left;
            text-align: center;
            line-height: 21px;
        }

        .btn-lu {
            width: 70px;
            height: 21px;
            float: left;
            text-align: center;
            line-height: 21px;
        }

        .login-agree {
            width: 980px;
            height: 16px;
            float: left;
            font-size: 12px;
            color: #99a2aa;
            text-align: center;
            line-height: 16px;
            margin: 24px auto 0;
        }
        .login-agree a{
            color: #00a1d6;
        }
    </style>
</head>

<body>
    <!-- 迷你导航 -->
    <div class="mini-head">
        <div class="nav">
            <div class="nav-1">
                <div class="mini-logo"></div>
                <ul>
                    <li class="nav-11">主站</li>
                    <li class="nav-11">番剧</li>
                    <li class="nav-12">游戏中心
                        <div class="nav-12-1">
                            <div class="jiao-1">
                                <div class="nav-12-2">
                                    <div class="nav-12-21">命运-冠位指定（Fate/Go）</div>
                                    <div class="nav-12-22">
                                        <div class="nav-12-22-1">
                                            <div class="nav-12-22-11"></div>
                                            <div class="nav-12-22-12">公主连结Re:Dive</div>
                                        </div>
                                        <div class="nav-12-22-1">
                                            <div class="nav-12-22-13"></div>
                                            <div class="nav-12-22-12">碧蓝航线</div>
                                        </div>
                                        <div class="nav-12-22-1">
                                            <div class="nav-12-22-14"></div>
                                            <div class="nav-12-22-12">灰烬战线</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="nav-12-3">
                                    <div class="nav-12-31"></div>
                                    <div class="nav-12-32"></div>
                                    <div class="nav-12-33">
                                        <ul>
                                            <li class="nav-12-331">天地劫：幽城再临
                                                <div class="nav-12-33-1"></div>
                                            </li>
                                            <li class="nav-12-331">英雄联盟手游
                                                <div class="nav-12-33-2"></div>
                                            </li>
                                            <li class="nav-12-331">暗黑破坏神：不朽
                                                <div class="nav-12-33-3"></div>
                                            </li>
                                            <li class="nav-12-331">Apex英雄
                                                <div class="nav-12-33-4"></div>
                                            </li>
                                            <li class="nav-12-331">地下城与勇士M
                                                <div class="nav-12-33-5"></div>
                                            </li>
                                            <li class="nav-12-331">黎明觉醒
                                                <div class="nav-12-33-6"></div>
                                            </li>
                                            <li class="nav-12-331">哈利波特：魔法觉醒
                                                <div class="nav-12-33-7"></div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-111">直播
                        <div class="nav-111-1">
                            <div class="jiao-2"></div>
                            <div class="nav-111-11">
                                <span class="nav-111-111">热门直播:</span>
                                <div class="nav1">
                                    <div class="nav11">
                                        <div class="bo-1">
                                            <div class="dian">
                                                <div class="dian1"></div>
                                                <div class="dian2">LIVE</div>
                                            </div>
                                        </div>
                                        <div class="bo-11">筱一</div>
                                    </div>
                                    <div class="nav11">
                                        <div class="bo-2">
                                            <div class="dian">
                                                <div class="dian1"></div>
                                                <div class="dian2">LIVE</div>
                                            </div>
                                        </div>
                                        <div class="bo-11">深鹿</div>
                                    </div>
                                    <div class="nav11">
                                        <div class="bo-3">
                                            <div class="dian">
                                                <div class="dian1"></div>
                                                <div class="dian2">LIVE</div>
                                            </div>
                                        </div>
                                        <div class="bo-11">一口奶音</div>
                                    </div>
                                    <div class="nav11">
                                        <div class="bo-4">
                                            <div class="dian">
                                                <div class="dian1"></div>
                                                <div class="dian2">LIVE</div>
                                            </div>
                                        </div>
                                        <div class="bo-11">樱落</div>
                                    </div>
                                    <div class="nav11">
                                        <div class="bo-5">
                                            <div class="dian">
                                                <div class="dian1"></div>
                                                <div class="dian2">LIVE</div>
                                            </div>
                                        </div>
                                        <div class="bo-11">/Y A/</div>
                                    </div>
                                    <div class="nav11">
                                        <div class="bo-6">
                                            <div class="dian">
                                                <div class="dian1"></div>
                                                <div class="dian2">LIVE</div>
                                            </div>
                                        </div>
                                        <div class="bo-11">小阿Kkkk</div>
                                    </div>
                                </div>
                            </div>
                            <div class="nav-111-12"></div>
                            <div class="nav-111-13">
                                <span class="bo-8">热门活动:</span>
                                <div class="bo-9"></div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-13">会员购</li>
                    <li class="nav-112">漫画
                        <div class="nav-112-1">
                            <div class="jiao-3"></div>
                            <div class="nav-112-2">
                                <div class="nav-112-2-1">
                                    <div class="nav-112-21"></div>
                                    <span class="nav-112-22">租借女友</span>
                                </div>
                                <div class="nav-112-2-1">
                                    <div class="nav-112-23"></div>
                                    <span class="nav-112-22">刀劍神域</span>
                                </div>
                                <div class="nav-112-2-1">
                                    <div class="nav-112-24"></div>
                                    <span class="nav-112-22">天賜官福</span>
                                </div>
                                <div class="nav-112-2-1">
                                    <div class="nav-112-25"></div>
                                    <span class="nav-112-22">仙王</span>
                                </div>
                            </div>
                            <div class="nav-112-3"></div>
                            <div class="nav-112-4">
                                <div class="nav-112-5">人气漫画</div>
                                <ul>
                                    <li class="aa">
                                        <span class="aa-1">1</span>
                                        <span class="aa-2">咒术回站
                                            <div class="aa-21"></div>
                                        </span>
                                    </li>
                                    <li class="ab">
                                        <span class="aa-1">2</span>
                                        <span class="aa-2">天赐官福
                                            <div class="aa-22"></div>
                                        </span>
                                    </li>
                                    <li class="ac">
                                        <span class="aa-1">3</span>
                                        <span class="aa-2">妹子太多，只好飞升...
                                            <div class="aa-23"></div>
                                        </span>
                                    </li>
                                    <li class="ad">
                                        <span class="aa-1">4</span>
                                        <span class="aa-2">掘与宫村
                                            <div class="aa-24"></div>
                                        </span>
                                    </li>
                                    <li class="ae">
                                        <span class="aa-1">5</span>
                                        <span class="aa-2">碧蓝之海
                                            <div class="aa-25"></div>
                                        </span>
                                    </li>
                                    <li class="af">
                                        <span class="aa-1">6</span>
                                        <span class="aa-2">反派初始化
                                            <div class="aa-26"></div>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="nav-11">赛事</li>
                </ul>
                <div class="nav-14">
                    <span class="iconfont icon2">&#xe641;</span>
                    <span class="nav-15">下载APP
                        <div class="nav-15-1">
                            <div class="jiao-4"></div>
                            <span class="nav-15-2">扫码下载手机客户端</span>
                        </div>
                    </span>
                </div>

            </div>
            <div class="nav-2">
                <div class="nav-21">
                    <input type="text" placeholder="“菜狗们”来集合了！">
                </div>
                <div class="nav-22">
                    <span class="iconfont icon3">&#xe618;</span>
                </div>
            </div>
            <div class="nav-3">登录
                <div class="nav-31">
                    <div class="san-1"></div>
                    <span class="nav-31-1">登录后你可以：</span>
                    <div class="nav-31-2">
                        <span class="iconfont icon4">&#xe627;</span>
                        <span class="nav-31-21">免费看高清视频</span>
                    </div>
                    <div class="nav-31-3">
                        <span class="iconfont icon4">&#xe665;</span>
                        <span class="nav-31-21">发表弹幕/评论</span>
                    </div>
                    <div class="nav-31-4">
                        <span class="iconfont icon4">&#xe810;</span>
                        <span class="nav-31-21">多端同步播放记录</span>
                    </div>
                    <div class="nav-31-5">
                        <span class="iconfont icon4">&#xe604;</span>
                        <span class="nav-31-22">热门番剧影视看不停</span>
                    </div>
                    <div class="nav-31-6">立即登录</div>
                    <div class="nav-31-7">
                        <div class="nav-31-8">首次使用?</div>
                        <div class="nav-31-9"><a
                                href="file:///C:/Users/Administrator/Desktop/%E7%BB%83%E4%B9%A0/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9!!!/02.html">点我注册</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-4">
                <ul class="cf">
                    <li class="nav-41">大会员
                        <div class="nav-41-1">
                            <div class="san-2"></div>
                            <span class="nav-41-2">精彩推荐</span>
                            <div class="nav-41-3"></div>
                            <p class="nav-41-4">大会员可畅享各种专属内容，还有游戏礼包、个性装扮等你来拿~</p>
                            <div class="nav-41-5">开通大会员</div>
                        </div>
                    </li>
                    <li class="nav-42">消息
                        <div class="nav-42-1">
                            <div class="san-3"></div>
                            <span class="nav-42-2">登录即可查看消息记录</span>
                            <div class="nav-42-3">立即登录</div>
                        </div>
                    </li>
                    <li class="nav-42">动态
                        <div class="nav-42-1">
                            <div class="san-3"></div>
                            <span class="nav-42-2">登录即可查看消息记录</span>
                            <div class="nav-42-3">立即登录</div>
                        </div>
                    </li>
                    <li class="nav-42">收藏
                        <div class="nav-42-1">
                            <div class="san-3"></div>
                            <span class="nav-42-2">登录即可查看消息记录</span>
                            <div class="nav-42-3">立即登录</div>
                        </div>
                    </li>
                    <li class="nav-43">历史记录
                        <div class="nav-43-1">
                            <div class="san-3"></div>
                            <span class="nav-42-2">登录即可查看消息记录</span>
                            <div class="nav-42-3">立即登录</div>
                        </div>
                    </li>
                    <li class="nav-43">创作中心</li>
                </ul>
            </div>
            <div class="nav-5">投稿
                <div class="nav-51">
                    <div class="san-4"></div>
                    <div class="nav-52">
                        <div class="nav-52-1"> <img src="./img/投稿-1.jpg" alt=""></div>
                        <div class="nav-52-2">专栏投稿</div>
                    </div>
                    <div class="nav-52">
                        <div class="nav-52-1"> <img src="./img/投稿-2.jpg" alt=""></div>
                        <div class="nav-52-2">音频投稿</div>
                    </div>
                    <div class="nav-52">
                        <div class="nav-52-1"> <img src="./img/投稿-3.jpg" alt=""></div>
                        <div class="nav-52-2">贴纸投稿</div>
                    </div>
                    <div class="nav-52">
                        <div class="nav-52-1"> <img src="./img/投稿-4.jpg" alt=""></div>
                        <div class="nav-52-2">视频投稿</div>
                    </div>
                    <div class="nav-52">
                        <div class="nav-52-1"> <img src="./img/投稿-5.jpg" alt=""></div>
                        <div class="nav-52-2">投稿管理</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 中间 -->
    <div class="top">
        <div class="banxin">
            <img src="./img/rl_top.35edfde.png" alt="">
            <div class="title-line">
                <span class="tit">登录</span>
            </div>
            <div class="login-left">
                <div class="login-left-up">
                    <div class="login-left-up-status">
                        <div class="status-up"></div>
                        <div class="login-left-up-two"></div>
                    </div>
                </div>
                <div class="login-left-down">
                    <p class="status-txt">扫描二维码登录</p>
                    <p class="app-link">
                        请使用 <a href="//app.bilibili.com/" target="_blank">哔哩哔哩客户端</a><br>
                        扫码登录<br>
                        或扫码下载APP
                    </p>
                </div>
            </div>
            <div class="login-line"></div>
            <div class="login-right">
                <div class="input-box">
                    <div class="type-tab">
                        <span class="active">密码登录</span>
                        <span class="active-mess">短信登录</span>
                    </div>
                    <input type="text" placeholder="你的手机号/邮箱" class="login-username">
                    <input type="text" placeholder="密码" class="login-password">
                    <div class="remember">
                        <input type="checkbox" class="checkbox">
                        <span class="remember-i">记住我</span>
                        <span class="remember-no">不是自己的电脑上不要勾选此项</span>
                        <div class="question">
                            <a target="_blank" href="//passport.bilibili.com/register/findpassword.html#/verify" class="forget-password">忘记密码?</a>
                            <a target="_blank" href="//www.bilibili.com/blackboard/help.html#%E8%B4%A6%E5%8F%B7%E7%9B%B8%E5%85%B3" class="not-checkout">无法验证?</a>
                        </div>
                    </div>
                    <div class="btn-box">
                        <div class="btn-login">登录</div>
                        <div class="btn-reg">
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%BB%83%E4%B9%A0/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9!!!/02.html">注册</a>
                        </div>
                    </div>
                    <div class="sns">
                        <div class="btn-weibo"></div>
                        <div class="btn-deng">微博账号登录</div>
                        <div class="btn-qq"></div>
                        <div class="btn-lu">QQ账号登录</div>
                    </div>
                </div>
            </div>
            <div class="login-agree">
                登录即代表你同意
                <a data-v-2c844fd9="" target="_blank" href="https://www.bilibili.com/protocal/licence.html">用户协议</a>
                和
                <a data-v-2c844fd9="" target="_blank" href="https://www.bilibili.com/blackboard/privacy-pc.html">隐私政策</a>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer-top">
            <div class="bx1">
                <div class="footer-top-left">
                    <span>bilibili</span>
                    <ul class="left-1">
                        <li>关于我们</li>
                        <li>友情链接</li>
                    </ul>
                    <ul class="left-1">
                        <li>联系我们</li>
                        <li>隐私政策</li>
                    </ul>
                    <ul class="left-1">
                        <li>用户协议</li>
                        <li>bilibili认证</li>
                    </ul>
                    <ul class="left-1">
                        <li>加入我们</li>
                        <li>Investor Relations</li>
                    </ul>
                </div>
                <div class="footer-top-middle">
                    <span>传送门</span>
                    <ul class="middle-1">
                        <li>协议汇总</li>
                        <li>活动中心</li>
                        <li>活动专题页</li>
                        <li>侵诉申权</li>
                    </ul>
                    <ul class="middle-2">
                        <li>帮助中心</li>
                        <li>用户反馈论坛</li>
                        <li>壁纸站</li>
                        <li>广告合作</li>
                    </ul>
                    <ul class="middle-3">
                        <li>名人堂</li>
                        <li>MCN管理中心</li>
                        <li>高级弹幕</li>
                        <li>企业号官网</li>
                    </ul>
                </div>
                <div class="footer-top-right">
                    <div class="right-1">
                        <div class="right-1-1"><span class="iconfont icon1">&#xe609;</span></div>
                        <p>下载APP</p>
                    </div>
                    <div class="right-1">
                        <div class="right-1-2"><span class="iconfont icon1">&#xe602;</span></div>
                        <p>新浪微博</p>
                    </div>
                    <div class="right-1">
                        <div class="right-1-3"><span class="iconfont icon1">&#xe503;</span></div>
                        <p>官方微信</p>
                    </div>
                </div>
                <div class="foot-bottom">
                    <div class="bottom-left">
                        <img src="./img/partner.png" alt="">
                        <img src="./img/pic962110.png" alt="">
                        <img src="./img/已服务.png" alt="">
                    </div>
                    <div class="bottom-right">
                        <ul class="bott-1">
                            <li class="ye">营业执照</li>
                            <li>信息网络传播视听节目许可证：0910417</li>
                            <li>网络文化经营许可证 沪网文【2019】3804-274号</li>
                            <li>广播电视节目制作经营许可证：（沪）字第01248号</li>
                            <li>增值电信业务经营许可证 沪B2-20100043</li>
                        </ul>
                        <ul class="bott-1">
                            <li>互联网ICP备案：沪ICP备13002172号-3</li>
                            <li>出版物经营许可证 沪批字第U6699 号</li>
                            <li>互联网药品信息服务资格证 沪-非经营性-2016-0143</li>
                            <li> 营业性演出许可证 沪市文演（经）00-2253</li>
                        </ul>
                        <ul class="bott-1">
                            <li>违法不良信息举报邮箱：help@bilibili.com |违法不良信息举报电话：4006262233转1</li>
                        </ul>
                        <div class="bottom-1">
                            <ul class="bott-1">
                                <li class="ye">上海互联网举报中心</li>
                                <li class="ye">12318全国文化市场举报网站</li>
                                <li class="ye">沪公网安备31011002002436号</li>
                                <li class="ye">儿童色情信息举报专区</li>
                                <li class="ye">扫黄打非举报</li>
                            </ul>
                        </div>
                        <div class="bottom-1">
                            <ul class="bott-1">
                                <li>网上有害信息举报专区：中国互联网违法和不良信息举报中心</li>
                            </ul>
                        </div>
                        <div class="bottom-1">
                            <ul class="bott-1">
                                <li>亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</li>
                            </ul>
                        </div>
                        <div class="bottom-1">
                            <ul class="bott-1">
                                <li>公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>